<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./css/bootstrap.min.css">
  <link rel="stylesheet" href="./css/main.css">
  <title>Layui - 经典模块化前端 UI 框架</title>
</head>

<body>
  <!-- 导航 -->
  <div class="container-fluid">
    <div class="container">
      <div class="navbar navbar-expand-md navbar-dark">
        <div class="navbar-brand">
          <img src="./images/logo.png" alt="" class="logo">
        </div>
        <div class="form-inline">
          <form action="">
            <div class="form-group">
              <div class="input-group input-group-sm">
                <input class="form-control" type="text" placeholder="搜索组件或模块">
              </div>
            </div>
          </form>
        </div>
        <ul class="navbar-nav ml-auto">
          <li class="nav-item "><a href="" class="nav-link">文档</a></li>
          <li class="nav-item"><a href="" class="nav-link">示例</a></li>
          <li class="nav-item"><a href="" class="nav-link">周边</a></li>
          <li class="nav-item"><a href="" class="nav-link">后台模板</a></li>
        </ul>
      </div>
    </div>
  </div>
  <!-- 轮播 -->
  <div class="banner">
    <div class="container">
      <h1 class="display-1">飞机</h1>
      <h2>经典模块化前端框架</h2>
      <p>由职业前端倾情打造，面向全层次的前后端开发者，低门槛开箱即用的前端 UI 解决方案</p>
      <a href="#" class="downloda btn btn-outline-secondary btn-lg">立即下载</a>
      <p>当前版本：2.5.6 <a href="#">更新日志 </a> 下载量：1666008</p>
      <div class="line">
        <span class="btn btn-outline-secondary btn-sm">Start 22167</span>
        <span class="btn btn-outline-secondary btn-sm">Fork</span>
        <span class="btn btn-outline-secondary btn-sm">码云</span>
      </div>
    </div>
  </div>
  <!-- 内容 -->
  <div class="content container-fluid">
    <div class="container">
      <div class="row">
        <div class=" col-md px-3 border">
          <h5 class="text-center pt-4">返璞归真</h5>
          <p class="mt-3 text-muted">身处在前端社区的繁荣之下，我们都在有意或无意地追逐。而 layui 偏偏回望当初，奔赴在返璞归真的漫漫征途，自信并勇敢着，追寻于原生态的书写指令，试图以最简单的方式诠释高效。</p>
        </div>
        <div class=" col-md px-3 border mx-md-5">
          <h5 class="text-center pt-4">双面体验</h5>
          <p class="mt-3 text-muted">拥有双面的不仅是人生，还有 layui。一面极简，一面丰盈。极简是视觉所见的外在，是开发所念的简易。丰盈是倾情雕琢的内在，是信手拈来的承诺。一切本应如此，简而全，双重体验。</p>
        </div>
        <div class=" col-md px-3 border">
          <h5 class="text-center pt-4">星辰大海</h5>
          <p class="mt-3 text-muted">如果眼下还是一团零星之火，那运筹帷幄之后，迎面东风，就是一场烈焰燎原吧，那必定会是一番尽情的燃烧。待，秋风萧瑟时，散作满天星辰，你看那四季轮回，正是 layui 不灭的执念。</p>
        </div>
      </div>
    </div>
  </div>
  <div class="footer container-fluid">
    <div class="container">
      <p>
        © 2020 <a href="#">layui.com</a> MIT license
      </p>
      <p>
        <a href="#">GitHub</a>
        <a href="#">码云</a>
        <a href="#">公众号</a>
        <a href="#">赣ICP备13006272号-2</a>
      </p>
      <p>
        感谢以下平台提供云加速支持
      </p>
      <a href="#"><img src="./images/upyun.png" alt=""></a>
      <a href="#"><img src="./images/cat-logo.png" alt=""></a>
    </div>
  </div>
</body>

</html>